<template>
  <div>
    <div class="search-box">
      <el-form ref="form" :model="searchFrom" class="botLeft  flex-wrap " label-width="110px" size="medium">
        <el-form-item class="elFormItem" label="渠道来源">
          <el-select filterable clearable style="width:100%" v-model.trim="searchFrom.channelId" placeholder="请选择">
            <el-option v-for="(item,index) in sourceList" :key="index" :label="item.channelName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="elFormItem" label="门票名称">
          <el-input :maxlength="26" :clearable="true" placeholder="请输入" v-model.trim="searchFrom.tTypeName"></el-input>
        </el-form-item>
        <el-form-item class="elFormItem" label="备注内容">
          <el-input :maxlength="26" :clearable="true" placeholder="请输入" v-model.trim="searchFrom.detail"></el-input>
        </el-form-item>
        <el-form-item class="elFormItem" label="订单号">
          <el-input :maxlength="46" :clearable="true" placeholder="请输入" v-model.trim="searchFrom.orderCode"></el-input>
        </el-form-item>
        <el-form-item class="elFormItem" label="报名时间">
          <el-date-picker style=" width: 100%;" v-model="searchFrom.createDate" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="left">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="elFormItem" label="赠票时间">
          <el-date-picker style=" width: 100%;" v-model="searchFrom.giveDate" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="elFormItem" label="审核状态">
          <el-select filterable clearable style="width:100%" v-model.trim="searchFrom.isActive" placeholder="请选择">
            <el-option label="未审核" value="0"></el-option>
            <el-option label="已通过" value="1"></el-option>
            <el-option label="未通过" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showMoreS" v-for="(item,index) of fieldList" :key="index" class="elFormItem" :label="item.attribute.titName">
          <el-input v-if="item.componentName=='stringTem'||item.componentName=='numberTem'" :maxlength="46" :clearable="true" placeholder="请输入" v-model.trim="item.attribute.filedValue"></el-input>
          <el-select filterable style="width:100%" v-if="item.componentName=='moreSelectTem'" v-model="item.attribute.filedValue" placeholder="请选择">
            <el-option v-for="(it,ind) of item.attribute.selectList" :key="ind" :label="it.name" :value="it.name"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="elFormItem" style="width:auto;" label="">
          <el-button @click="search()" type="primary" icon="el-icon-search">搜索</el-button>
          <el-button @click="clearSearchFrom()">清空</el-button>
          <el-button @click="showMoreS=!showMoreS" :icon="showMoreS?'el-icon-arrow-up':'el-icon-arrow-down'" type="text">{{showMoreS?'收起':'展开'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import pickerOptions from "@/components/js/pickerOptions.js";
export default {
  computed: {
    fieldList() {
      return this.$store.state.activityId.fieldList;
    },
    sourceList() {
      return this.$store.state.activityId.sourceList;
    }
  },
  data() {
    return {
      subSearchFrom: {}, //提交搜索的表单字段
      pickerOptions: pickerOptions,
      searchFrom: {
        channelId: "",
        tTypeName: "",
        detail: "",
        orderCode: "",
        isActive: "",
        createDate: [],
        giveDate: []
        //搜索表单字段条件
      },
      showMoreS: false
    };
  },
  methods: {
    // 搜索
    search() {
      let searchFrom = {
        channelId: this.searchFrom.channelId,
        tTypeName: this.searchFrom.tTypeName,
        detail: this.searchFrom.detail,
        orderCode: this.searchFrom.orderCode,
        isActive: this.searchFrom.isActive
      };
      // 渠道来源为赠票则特殊处理
      if (this.searchFrom.channelId == "6868686686868686") {
        searchFrom.channelId = "";
        searchFrom.source = 3;
      }

      if (this.searchFrom.createDate.length) {
        searchFrom.createStartDate = this.searchFrom.createDate[0];
        searchFrom.createEndDate = this.searchFrom.createDate[1];
      }

      if (this.searchFrom.giveDate.length) {
        searchFrom.giveStartDate = this.searchFrom.giveDate[0];
        searchFrom.giveEndDate = this.searchFrom.giveDate[1];
      }

      for (let i = 0; i < this.fieldList.length; i++) {
        searchFrom[this.fieldList[i].attribute.filedCode] =
          this.fieldList[i].attribute.filedValue || "";
      }
      this.subSearchFrom = searchFrom;
      this.$parent.getTableData();
    },
    // 清空
    clearSearchFrom() {
      this.searchFrom = {
        channelId: "",
        tTypeName: "",
        detail: "",
        orderCode: "",
        isActive: "",
        createDate: [],
        giveDate: []
      };
      for (let i = 0; i < this.fieldList.length; i++) {
        this.fieldList[i].attribute.filedValue = "";
      }
      this.search();
    }
  }
};
</script>
